<template>
	<view class="goods" @click="gotoDetails">
		<view class="goods-left">
			<image :src="getImg"></image>
		</view>
		<view class="goods-right">
			<view class="goods-describe">
				<text>{{contentData.detail}}</text>
			</view>
			<view class="goods-address">
				<text>预约地址：</text>
				<text>{{contentData.address}}</text>
			</view>
			<view class="goods-price">
				<text>￥：{{contentData.price}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['contentData'],
		data() {
			return {
				nullImg: require('@/static/img/common/null_address.svg'),
			}
		},
		computed: {
			getImg() {
				if (this.contentData.imgs.length == 0) {
					return this.nullImg
				}
				const img = this.contentData.imgs.split(',')
				return img[0]
			}
		},
		methods: {
			//跳转详情页面
			gotoDetails() {
				// this.$isLoginByVisitor()
				// if(uni.getStorageSync('isVisitorLogin')){
				// 	return
				// }
				
				if (this.contentData.type == 4) {
					return uni.navigateTo({
						url: '/subpkg/main/home/xz-details/xz-details?reqData=' + JSON.stringify(this.contentData)
					})
				}

				var reqData = {
					id: this.contentData.id,
					type: this.contentData.type
				}
				//console.log(123)
				uni.navigateTo({
					url: '/subpkg/main/home/details/details?reqData=' + JSON.stringify(reqData)
				})
			}
		},
		onLoad() {}
	}
</script>

<style scoped lang="scss">
	.goods {
		display: flex;
		padding: 20rpx;

		.goods-left {
			image {
				margin: 20rpx;
				width: 160rpx;
				height: 160rpx;
			}
		}

		.goods-right {
			.goods-describe {
				text {
					font-size: 30rpx;
					margin: 20rpx 0;
				}

				// margin-bottom: 20rpx;

				-webkit-line-clamp: 2;
				//（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性） 
				display: -webkit-box;
				//（和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ） 
				-webkit-box-orient: vertical;
				//（和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ） 
				overflow: hidden;
				//（文本溢出限定的宽度就隐藏内容） 
				text-overflow: ellipsis;
				//（多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本)
			}

			.goods-address {
				font-size: 30rpx;
				margin: 10rpx 0;
				display: block;
			}

			.goods-price {
				text {
					font-size: 32rpx;
					color: #ff6a6c;
					margin-right: 20rpx;
				}
			}
		}

	}
</style>